<template>
  <el-container>
    <el-aside width="300px">
      <novel-catalog></novel-catalog>
    </el-aside>
    <el-main>
      <ul class="dh">
        <li><a @click="setPageType(pageTypes[0])">人气排序</a></li>
        <li><a @click="setPageType(pageTypes[1])">总收藏</a></li>
        <li><a @click="setPageType(pageTypes[2])">总字数</a></li>
        <li>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              推荐票<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" :split-button="true">
              <el-dropdown-item command="week">月推荐</el-dropdown-item>
              <el-dropdown-item command="month">总推荐</el-dropdown-item>
              <!-- <el-dropdown-item command="sum">总推荐</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
      <ul class="books">
        <li v-for="(book, index) of bookArr" :key="index" class="bItem">
          <book-list-item :book="book"></book-list-item>
        </li>
      </ul>
      <el-pagination
        background
        layout=" prev, pager, next, jumper"
        :page-count="pageSum"
        :pager-count="9"
        :page-size="pageSize"
        :hide-on-single-page="isShowPage"
        :current-page.sync="currentPage"
        @current-change="current"
        @size-change="size"
      >
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import NovelLabel from "@/components/NovelLabel.vue";
import BookListItem from "@/components/BookListItem.vue";
import NovelCatalog from "@/components/NovelCatalog.vue";

export default {
  components: { NovelLabel, BookListItem, NovelCatalog },
  data() {
    return {
      //
      pageTypes: ["recent_visit", "subscription", "word_count", "recent_integral", "integral", "总推荐"],
      //分页类型
      pageType: null,
      //一页显示多少数据
      pageSize: 20,
      // 当前页码
      currentPage: 1,
      //总页数
      pageSum: 20,
      //是否显示分页导航
      isShowPage: true,
      bookArr: [
        {
          id: 0,
          name: "夜的命名术",
          authorId: 23,
          author: "会说话的肘子",
          imgPath: require("@/assets/book.jpg"),
          catalog1: "都市",
          catalog2: "异能",
          serialState: "连载",
          synopsis:
            "蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分",
          wordsNumber: 99999,
          newChapter: "最新章节",
          chapterId: 2334,
        },
        {
          id: 0,
          name: "夜的命名术",
          authorId: 23,
          author: "会说话的肘子",
          imgPath: require("@/assets/book.jpg"),
          catalog1: "都市",
          catalog2: "异能",
          serialState: "连载",
          synopsis:
            "蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分",
          wordsNumber: 99999,
          newChapter: "最新章节",
          chapterId: 2334,
        },
        {
          id: 0,
          name: "夜的命名术",
          authorId: 23,
          author: "会说话的肘子",
          imgPath: require("@/assets/book.jpg"),
          catalog1: "都市",
          catalog2: "异能",
          serialState: "连载",
          synopsis:
            "蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分",
          wordsNumber: 99999,
          newChapter: "最新章节",
          chapterId: 2334,
        },
        {
          id: 0,
          name: "夜的命名术",
          authorId: 23,
          author: "会说话的肘子",
          imgPath: require("@/assets/book.jpg"),
          catalog1: "都市",
          catalog2: "异能",
          serialState: "连载",
          synopsis:
            "蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分",
          wordsNumber: 99999,
          newChapter: "最新章节",
          chapterId: 2334,
        },
      ],
    };
  },

  methods: {
    ...mapActions("remoteData", ["getBookPageBySortFiled"]),
    setPageType(type) {
      this.pageType = type;
      //TODO:每当点击分类时修改数据
      let startPage = (this.currentPage - 1) * this.pageSize;
      this.getBookPageBySortFiled({sortType:type,startPage,pageSize:this.pageSize});
    },
    handleCommand(target) {
      if (target == "week") {
        this.setPageType(this.pageTypes[3]);
      } else if (target == "month") {
        this.setPageType(this.pageTypes[4]);
      }
      // } else if (target == "sum") {
      //   this.setPageType(this.pageTypes[5]);
      // }
    },
    current(val) {
      console.log(`当前页改变${val} + ${this.currentPage}`);
      if (val > 0) {
        let startPage = (this.currentPage - 1) * this.pageSize;
        console.log(`从${startPage} 开始`);
        this.getPage(this.pageType, startPage, this.pageSize);
      }
    },
    size() {
      console.log("每页显示数据" + this.pageSize);
    },
    /**
     * type插叙类型即where条件
     * start开始后的num条数据
     */
    getPage(type, start, num) {
      if (type) {
      }
      //查询分页数据
      //this.dataArr =
      //总页数
      //this.pageSum =
      if (this.pageSum == 1) {
        this.isShowPage = false;
      } else {
        this.isShowPage = true;
      }
      console.log(type,start,num)
      //TODO:点击页数后查询页面
      this.getBookPageBySortFiled({sortType:type,startPage:start,pageSize:num})
    },
  },
  computed: {
    ...mapState("remoteData", ["bookListPage"]),
  },
  watch: {
    bookListPage() {
      console.log("bookList数据改变",this.bookListPage);
      this.currentPage = this.bookListPage.current
      this.bookArr = this.bookListPage.records
      this.pageSum = Math.ceil(this.bookListPage.total/this.pageSize)
      //TODO修改页面数据
    },
  },
  created() {
    console.log("组件初始化")
    this.getPage(null,0,this.pageSize);
    
  },
  beforeRouteLeave(to, from, next) {
    //离开当前组件时,销毁查询数据
    next()
    //TODO:
  },
};
</script>

<style scoped>
.books {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: wrap;
  /* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
  justify-content: flex-start;
}
.bItem {
  margin: 20px;
}
.el-container {
  margin: 20px 40px;
}
.dh {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: nowrap;
  justify-content: flex-start;
  background: #f7f6f2;
  line-height: 40px;
}
.dh > li {
  margin: 0 10px;
  color: #606266;
  font-size: 14px;
}
.dh > li:hover {
  color: red;
}
.el-main {
  padding-top: 0px;
}
</style>